<template id="actInfoComponent">
    <div class="rp-active-data" id="activeData">
        <!--活动数据-->
        <div class="rp-prize-active-content">
            <div class="rp-title-wrap">
                <img v-if="!defaultPageMsg.headerImg" class="rp-title-img" :src="staticImageUrl('images/pump_item_header.png')" alt=""/>
                <img v-else class="rp-title-img" :src="defaultPageMsg.headerImg" alt=""/>
                <span class="rp-title">{{defaultPageMsg.actTitle}}</span>
            </div>
            <div class="rp-prize-data-content-wrap">
                <div class="rp-prize-data-content" v-for="value in defaultPageMsg.item">
                    <span class="rp-prize-team-number">{{value.title}}</span>
                    <span class="rp-prize-team-number-text">{{value.num}}人</span>
                </div>
                <!--<div class="rp-prize-data-content">-->
                    <!--<span class="rp-prize-team-number prize-join-number">参与人数</span>-->
                    <!--<span class="rp-prize-team-number-text">{{value.item.memberNum}}人</span>-->
                <!--</div>-->
                <!--<div class="rp-prize-data-content">-->
                    <!--<span class="rp-prize-team-number prize-browser-number">浏览人数</span>-->
                    <!--<span class="rp-prize-team-number-text">{{value.item.visitNum}}人</span>-->
                <!--</div>-->
            </div>
            <!--活动规则-->
            <!--根据活动的模板种类来判断是否需要显示活动规则 ，暂时为false-->
            <div v-if="defaultPageMsg.isNeedActRule">
                <img class="rp-prize-active-data rp-prize-active-rule-img" :src="'images/prize_active_rule.png'| imagesPath"
                     alt=""/>
                <div class="rp-prize-rule">
                    <div class="rp-prize-rule-step-wrap">
                        <div class="rp-prize-rule-step">
                            <span>开团</span><span class="rp-right-triangle"></span>
                            <span>邀好友<br/>拆红包</span><span class="rp-right-triangle"></span>
                            <span>购买时<br/>抵扣</span><span class="rp-right-triangle"></span>
                            <span>购买</span>
                        </div>
                        <p v-for="rule in actInfo.rules">{{rule}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import xurl from '../../../../../x/xurl'

    export default {
        name: 'actInfoComponent',
        props: {
            actInfo:{
                type:Object
            },
            actInfoPageMsg:{
                type:Object
            }
        },
        data() {
            return {
                defaultPageMsg:{
                    isNeedActRule:false,//是否需要显示活动规则
                    actTitle:'活动数据',//模块标题
                    headerImg:'',//头部图片
                    item:[
                        {title:'开团数量',num:0},
                        {title:'参与人数',num:0},
                        {title:'浏览人数',num:0},
                    ],
                }
            }
        },
        mounted(){
            if(this.actInfoPageMsg){
                this.defaultPageMsg = Object.assign(this.defaultPageMsg,this.actInfoPageMsg);
            }
        },
        watch:{
            actInfoPageMsg:{
                handler(newVal,oldVal){
                    this.actInfoPageMsg = Object.assign(this.actInfoPageMsg,newVal);
                },
                deep:true,
            }
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/components/activeData.css');
</style>
